<template>
  <div class="page-datafilter">
    <div class="filter-header">搜索条件：
      <Select v-model="tempFilter.condition" style="width: 200px;">
        <Option v-for="item in conditionList" :value="item.id" :key="item.id">{{ item.label }}</Option>
      </Select>
    </div>

    <Form class="filter-form" v-for="(item,index) of tempFilter.rules" :key="index">
      <!-- 字段名 -->
      <FormItem>
        <Select v-model="item.field" placeholder="请选择字段">
          <Option v-for="item in argsList" :value="item.name" :key="item.name">{{ item.name }}</Option>
        </Select>
      </FormItem>

      <!-- 条件 -->
      <FormItem>
        <Select v-model="item.operator" placeholder="请选择条件">
          <Option v-for="item in operatorList" :value="item.id" :key="item.id">{{ item.label }}</Option>
        </Select>
      </FormItem>

      <!-- 值的类型 -->
      <FormItem  style="width: 100px">
        <Select v-model="item.valueType" placeholder="请选择值类型" @on-change="changeValueType(item)">
          <Option value="string">字符串</Option>
          <Option value="int">数值</Option>
        </Select>
      </FormItem>

      <!-- 值 -->
      <FormItem style="width: 200px" >
        <Input v-model.trim="item.value" placeholder="请输入值" clearable :maxlength="100" v-if="item.valueType === 'string' || !item.valueType"/>
        <InputNumber v-model.trim="item.value" placeholder="请输入数值" clearable v-if="item.valueType === 'int'"/>
      </FormItem>
      <i class="iconfont icon-trash" @click="delDataFilter(index)" style="margin-left:10px"></i>
    </Form>

    <div class="filter-add-icon">
      <Icon type="ios-add-circle-outline" @click="addDataFilter"/>
    </div>

    <div class="filter-footer">
      <Button  @click="cancelHandler"  style="margin-right:8px">取消</Button>
      <Button type="primary" @click="okHandler">确定</Button>
    </div>
  </div>
</template>

<script>
// import { getDataSetData } from 'http/api/datas';
export default {
  props: ['dataFilter', 'fields', 'id'],
  data () {
    return {
      tempFilter: {},
      conditionList: [
        {
          id: 'AND',
          label: 'AND'
        },
        {
          id: 'OR',
          label: 'OR'
        }
      ],
      argsList: [],
      operatorList: [
        {
          id: 'EQ',
          label: '等于'
        },
        {
          id: 'GT',
          label: '大于'
        },
        {
          id: 'GTE',
          label: '大于等于'
        },
        {
          id: 'in',
          label: 'IN'
        },
        {
          id: 'LT',
          label: '小于'
        },
        {
          id: 'LTE',
          label: '小于等于'
        },
        {
          id: 'NE',
          label: '不等于'
        },
        {
          id: 'NIN',
          label: 'not in'
        },
        {
          id: 'CONTAINS',
          label: '字符串包含'
        },
        {
          id: 'STARTWITH',
          label: '开始'
        },
        {
          id: 'ENDWITH',
          label: '结尾'
        }
      ]
    };
  },
  methods: {
    // 确定
    okHandler () {
      // 校验
      // if (!this.tempFilter.condition && this.tempFilter.rules.length > 1) {
      //   this.$Message.error('请选择搜索条件');
      //   return;
      // }

      // if (this.tempFilter.rules.length === 0) {
      //   this.$Message.error('请添加过滤条件');
      //   return;
      // }

      let isChecked = true;
      this.tempFilter.rules.find(item => {
        if (
          !item.field ||
          !item.value ||
          !item.operator
        ) {
          isChecked = false;
        }
      });

      if (!isChecked) {
        this.$Message.error('存在未填写的数据');
        return;
      }

      this.$emit('okHandler', this.tempFilter);
    },

    // 取消
    cancelHandler () {
      this.$emit('cancelHandler');
    },

    // 删除
    delDataFilter (index) {
      this.tempFilter.rules.splice(index, 1);
    },

    // 新增
    addDataFilter () {
      this.tempFilter.rules.push({
        field: '',
        operator: '',
        value: '',
        valueType: 'string'
      });
    },

    // 切换值的类型
    changeValueType (item) {
      item.value = item.valueType === 'int' ? null : ''
    }
  },

  mounted () {
    // if (this.dataFilter) {
    //   this.tempFilter = JSON.parse(JSON.stringify(this.dataFilter));
    //   // 给值加上类型属性
    //   this.tempFilter.rules.forEach(rule => {
    //     if (!rule.valueType) {
    //       rule.valueType = 'string'
    //     }
    //   })
    // }

    // if (this.fields.length) {
    //   this.argsList = this.fields;
    // } else {
    //   getDataSetData({
    //     id: this.id,
    //     field: '',
    //     fieldValue: '',
    //     pageIndex: 1,
    //     pageSize: 1
    //   }).then(res => {
    //     // 仅仅获取字段
    //     if (res) {
    //       this.argsList = res.headers;
    //     }
    //   });
    // }
  }
};
</script>

<style rel="stylesheet/less" lang="less">
.page-datafilter {
  .ivu-form-item {
    width: 24%;
    margin-bottom:10px;
    display: inline-block;
  }
  .filter-footer {
    text-align: right;
    margin-top: 10px;
  }
  .filter-add-icon {
    text-align: center;
    margin-top: 10px;
    .ivu-icon-ios-add-circle-outline {
      font-size: 22px;
      cursor: pointer;
    }
  }
  .filter-form {
    margin-top: 10px;
    position: relative;
    .icon-trash {
      position: absolute;
      right: 0px;
      top: 5px;
      cursor: pointer;
    }
    .ivu-input-number{
      width: 100%!important;
    }
  }
}
</style>
